<template>
	<view class="big-price" :style="{ fontSize: `${fontSize}rpx` }">
		<text class="big-price-unit" v-if="isUnit">￥</text>
		<text class="big-price-l" :style="{ fontSize: `${integerSize}rpx` }">{{integerPrice}}</text>
		<text class="big-price-point">.</text>
		<text class="big-price-r" :style="{ fontSize: `${decimalSize}rpx` }">{{decimalPrice}}</text>
	</view>
</template>

<script setup>
  import { computed, ref } from 'vue'
	const props = defineProps({
		price: {
			type: [String, Number],
			default: ''
		},
		fontSize: {
			type: Number,
			default: 24
		},
		integerSize: {
			type: Number,
			default: 36
		},
		decimalSize: {
			type: Number,
			default: 24
		},
		isUnit: {
			type: Boolean,
			default: true
		}
	})
	
	const integerPrice = computed(() => {
		return props.price.toString().split('.')?.[0] || '0'
	})
	const decimalPrice = computed(() => {
		return props.price.toString().split('.')?.[1] || '00'
	})
</script>

<style lang="scss" scoped>
  .big-price {
  	vertical-align: bottom;
		&-l {
			line-height: 1;
		}
  }
</style>
